<template>
    <div class="bpmn-modeler">
      <div ref="canvasRef" class="canvas"></div>
    </div>
  </template>
  
  <script setup>
  import { onMounted, ref } from "vue";
  import Modeler from 'bpmn-js/lib/Modeler';
  
  const canvasRef = ref(null);
  
  onMounted(async () => {
    if (canvasRef.value) {
      const bpmnModeler = new Modeler({
        container: canvasRef.value,
      });
  
      try {
        // 初始化图表
        bpmnModeler.createDiagram(() => {
          bpmnModeler.get("canvas").zoom("fit-viewport");
        });
      } catch (error) {
        console.log(error);
      }
    }
  });
  </script>
  
  <style scoped>
  .bpmn-modeler {
    height: 100%;
    width: 100%;
  }
  
  .canvas {
    height: 100%;
    width: 100%;
  }
  </style>
  